<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="description" content="A short description of your company">
<meta name="keywords" content="Some keywords that best describe your business">
<title>Cloud Host - Shortcodes Tabs &amp; Toggles</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic|Cutive' rel='stylesheet' type='text/css'>
<link href="style.css" media="screen" rel="stylesheet" type="text/css">

<!-- main-js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/general.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!--/ main-js -->

<!-- shortcode: Tabs -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!-- shortcode: Slides images/text -->
<script type="text/javascript" language="javascript" src="js/slides.min.jquery.js"></script>
<!-- shortcode: Lightbox prettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<!-- SyntaxHighlighter for shortcodes -->
<script type="text/javascript" language="javascript" src="js/shCore.js"></script>
<script type="text/javascript" language="javascript" src="js/shBrushPlain.js"></script>
<link href="css/shCore.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" media="screen" rel="stylesheet" type="text/css" />

<!-- custom CSS -->
<link href="custom.css" media="screen" rel="stylesheet" type="text/css">

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body>
<div class="body_wrap">

<div class="header header_top">
	<div class="container_12">
    	
        <div class="logo">
	        <a href="index.html"><img src="images/logo.png" alt=""></a>
            <strong><span></span>CLOUDHOST</strong>
        </div>
        
		<div class="topmenu">            
	            <ul class="dropdown">
	                <li class="menu-item-home"><a href="index.html"><span>Home</span></a></li>
	                <li><a href="solutions.html"><span>Solutions</span></a></li>
                    <li><a href="pricing.html"><span>Plans & Pricing</span></a></li>
	                <li class="current-menu-ancestor"><a href="#"><span>Pages</span></a>
	                	<ul>
	                    	<li><a href="blog.html"><span>Blog - Sidebar Right</span></a></li>
	                    	<li><a href="blog-sidebar-l.html"><span>Blog - Sidebar Left</span></a></li>
	                        <li class="current-menu-ancestor"><a href="#"><span>Shortcodes</span></a>
	                            <ul>                                
	                                <li><a href="shortcodes-buttons.html"><span>Buttons & Lists</span></a></li> 
	                                <li><a href="shortcodes-text.html"><span>Text & Images</span></a></li>
	                                <li class="current-menu-item"><a href="shortcodes-tabs.html"><span>Tabs & Toggles</span></a></li>
	                                <li><a href="shortcodes-charts.html"><span>Charts</span></a></li>  
	                                <li><a href="shortcodes-columns.html"><span>Columns</span></a></li>  
	                                <li><a href="shortcodes-lightbox.html"><span>Lightbox</span></a></li>
	                                <li><a href="shortcodes-tables.html"><span>Tables & Boxes</span></a></li>
	                                <li><a href="shortcodes-media.html"><span>Media (Videos & Img)</span></a></li>
	                                <li><a href="shortcodes-maps.html"><span>Maps & Locations</span></a></li>                                
	                                <li><a href="shortcodes-typography.html"><span>Typography</span></a></li>
	                                <li><a href="shortcodes-widgets.html"><span>Widgets</span></a></li>
	                            </ul>
	                        </li>
	                        <li><a href="about.html"><span>About us</span></a></li>
	                    </ul>
	                </li>
	                <li><a href="support.html"><span>Support</span></a></li>                          
	                <li><a href="contact.html"><span>Contact</span></a></li>
	            </ul>                
		</div>
        <!--/ topmenu -->
            
    </div>
</div>

<div class="header header_thin">
	<div class="container_12">    
		<div class="breadcrumbs"><a href="index.html">Homepage</a> <span class="separator">&nbsp;</span> <a href="#">Pages</a> <span class="separator">&nbsp;</span> <a href="#">Shortcodes</a> <span class="separator">&nbsp;</span> Tabs & Toggles</div>
    </div>
</div>
<!--/ header -->

<div class="middle cols2">
<div class="container_12">

<!-- content -->
    <div class="content">
    
    		<div class="post-item post-detail">
            		
                    <script type="text/javascript">
					SyntaxHighlighter.defaults['gutter'] = false;
					SyntaxHighlighter.defaults['toolbar'] = true;		
					SyntaxHighlighter.all();
					</script>    
                    
                    <div class="post-title">
                        <h1>Shortcodes: Tabs and Toggles</h1>
                    </div>                            
                    
					<div class="entry">
                    
	                    <h2>Framed Tabs Example:</h2>
                        <!-- tabs in text -->
				<div class="tabs_framed">
                
					<ul class="tabs">
                        <li><a href="#tabs_1_1">Tab 1</a></li>
                        <li><a href="#tabs_1_2">Tab 2</a></li>
                        <li><a href="#tabs_1_3">Tab 3</a></li>
                        <li><a href="#tabs_1_4">Tab 4</a></li>
                    </ul>
                    
                    <div id="tabs_1_1" class="tabcontent">
                    	<div class="inner">
              
						
                       <!-- pricing table -->
                        <div class="pricing_box">
                            <ul>
                                <li class="price_col">
                                    <div class="price_item">                                        
                                        <div class="price_col_head">
                                            <strong>STARTER</strong> 
                                          <span class="price"><em>$</em>14<sup>.99</sup><em>/mo.</em></span>
                                      </div>
                                        
                                        <div class="price_col_body">
                                            <ul>
												<li><strong>10GB</strong> Storage Space</li>
												<li><strong>50GB</strong>  Bandwidth</li>
												<li><strong>10 Free</strong> Sub-Domains</li>
												<li><strong>250</strong> E-mail Accounts</li>
												<li>Control Panel & FTP</li>
												<li>No Shared 128bit SSL</li>
                                            </ul>
                                            
                                          <div class="price_body_bot">Best for:  <strong>Start-ups</strong></div>
                                        </div>
                                        
                                        <div class="price_col_foot">
                                            <div class="sign_up"><a href="#">Sign up <strong>NOW</strong></a></div>
                                            <img src="images/pricing_foot_bg.png" alt="">
                                        </div>
                                    </div>
                                </li>
                                
                                <li class="price_col">
                                    <div class="price_item">                                        
                                        <div class="price_col_head head_green_dark">
                                            <strong>ADVANCED</strong> 
                                            <span class="price"><em>$</em>24<sup>.99</sup><em>/mo.</em></span>   
                                        </div>
                                        
                                        <div class="price_col_body">
                                            <ul>
												<li><strong>250GB</strong> Storage Space</li>
												<li><strong>20,000GB</strong>  Bandwidth</li>
												<li><strong>30 Free</strong> Sub-Domains</li>
												<li><strong>500</strong> E-mail Accounts</li>
												<li>Control Panel & FTP</li>
												<li>No Shared 128bit SSL</li>
                                            </ul>
                                            
                                            <div class="price_body_bot">Best for:  <strong>Businesses</strong></div>
                                        </div>
                                        
                                        <div class="price_col_foot">
                                            <div class="sign_up"><a href="#">Sign up <strong>NOW</strong></a></div>
                                            <img src="images/pricing_foot_bg.png" alt="">
                                        </div>
                                    </div>
                                </li>
                                
                                <li class="price_col">
                                    <div class="price_item">                                        
                                        <div class="price_col_head head_red">
                                            <strong>PROFESSIONAL</strong>
                                            <span class="price"><em>$</em>89<sup>.99</sup><em>/mo.</em></span>
                                        </div>
                                        
                                        <div class="price_col_body">
                                            <ul>
												<li><strong>500GB</strong> Storage Space</li>
												<li><strong>40,000GB</strong>  Bandwidth</li>
												<li><strong>50 Free</strong> Sub-Domains</li>
												<li><strong>Unlimted</strong> E-mail Accounts</li>
												<li>Control Panel & FTP</li>
												<li>No Shared 128bit SSL</li>
                                            </ul>
                                            
                                            <div class="price_body_bot">Best for:  <strong>Resellers, Devs</strong></div>
                                        </div>        
                                        
                                        <div class="price_col_foot">
                                            <div class="sign_up"><a href="#">Sign up <strong>NOW</strong></a></div>
                                            <img src="images/pricing_foot_bg.png" alt="">
                                        </div>
                                    </div>
                                </li>
                                
                                
                                
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <!--/ pricing table -->
                       		
						</div>
                    </div>
                    
                    <div id="tabs_1_2" class="tabcontent">
                    	<div class="inner">
                    	<h3>Tab 2 content Title</h3>
						<p><img src="images/temp/flickr_05.jpg" width="75" height="75" alt="" class="frame_right"> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Lorem Ipsum has been the industry's standard dummy text ever since theok a galley of type and scra.</p>
                        <p>>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        
                        </div>
					</div>
                    
                    <div id="tabs_1_3" class="tabcontent">
                    	<div class="inner">
                        <p><img src="images/temp/flickr_05.jpg" width="75" height="75" alt="" class="alignleft">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Lorem Ipsum has been the industry's standard </p>
                    	
                        </div>
                    </div>
                    
                    <div id="tabs_1_4" class="tabcontent">
                    	<div class="inner">
                       	<h3>Tab 4 content Title</h3>
                    	<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Lorem Ipsum has been the industry's standard dummy text ever since theok a galley of type and scra.</p>
                        </div>
                    </div>
                    
                    
				</div>
        	<!--/ tabs in text -->
                
           
<pre class="brush: plain">
[framed_tabs tab1="Tab 1" tab2="Tab 2" tab3="Tab 3" tab4="Tab 4"]
    [tab]Tab content 1[/tab]
    [tab]Tab content 2[/tab]
    [tab]Tab content 3[/tab]
    [tab]Tab content 4[/tab]
[/framed_tabs]
</pre>
            	
                <h2><span>Small</span> Framed Tabs </h2>                	
                    <div class="tabs_framed small_tabs">
                
                    <ul class="tabs">
                        <li><a href="#tabs_2_1">Tab 1</a></li>
                        <li><a href="#tabs_2_2">Tab 2</a></li>
                        <li><a href="#tabs_2_3">Tab 3</a></li>
                    </ul>
                    
                    <div id="tabs_2_1" class="tabcontent">
                    	<div class="inner">
                       	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Lorem Ipsum has been the industry's standard dummy text ever since theok a galley of type and scra.</p>
                        </div>
                    </div>
                    
                    <div id="tabs_2_2" class="tabcontent">
                    	<div class="inner">
						<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. </p>
						<p>Lorem Ipsum has been the industry's standard dummy text ever since theok a galley of type and scra.</p>
                        </div>
	              	</div>
                    
                    <div id="tabs_2_3" class="tabcontent">
                    	<div class="inner">
                    	<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries. Lorem Ipsum has been the industry's standard dummy text ever since theok a galley of type and scra.</p>
                        </div>
                    </div>
                    
                </div>

<pre class="brush: plain">
[framed_tabs type="small" tab1="Tab 1" tab2="Tab 2" tab3="Long Tab 3" tab4="T4"]
    [tab]Tab content 1[/tab]
    [tab]Tab content 2[/tab]
    [tab]Tab content 3[/tab]
    [tab]Tab content 4[/tab]
[/framed_tabs]
</pre>        

				<h2>Toggle Content:</h2>

				<h3 class="toggle box">Toggle Content (Click to Open) <span class="ico"></span></h3>
                        <div class="toggle_content boxed">
                        <p>Every one of our wp themes, comes with extensive documentation and video tutorials that help you install, set up, and edit your theme and you don't even need a lot of wp knowledge or programming skills like js, or php. The thing we are most proud of when we talk about support, it our AfterCare Support Forums that you can access any time and receive guidance and solutions to your issues directly from the ThemeFuse developers</p>
                        </div>
                    
<pre class="brush: plain">
[toggle_content title="Toggle Content (Click to Open)" type=&quot;boxed&quot; style="box_blue"]
toogle content here...
[/toggle_content]
</pre>
                    	<h2>Toggle <span>FAQ</span></h2>
                    
            			<h3 class="toggle box">Toggle Content (Click to Open) <span class="ico"></span></h3>
                        <div class="toggle_content boxed">
                        	
                            <div class="faq_question toggle"><span class="faq_q">Q:</span> <span class="faq_title">What AfterCare services do you offer?</span> <span class="ico"></span></div>
                        	<div class="faq_answer toggle_content">
                        	<p>Every one of our wp themes, comes with extensive documentation and video tutorials that help you install, set up, and edit your theme and you don't even need a lot of wp knowledge or programming skills like js, or php. The thing we are most proud of when we talk about support, it our AfterCare Support Forums that you can access any time and receive guidance and solutions to your issues directly from the ThemeFuse developers</p>
						</div>
                        
                        <div class="faq_question toggle"><span class="faq_q">Q:</span> <span class="faq_title">How do i get in touch with you?</span> <span class="ico"></span></div>
                        <div class="faq_answer toggle_content">
                        <p>First of all we recommend you to check the product detail page. We try to make this page as complete as we can, so you'll find there description, features and live demo preview access.</p>
                        <p>However, if you still have some questions, you can use the direct contact form from the contact page. Don't forget to select "Pre purchase question" from the list of subjects. </p>
                        </div>
                        
                        <div class="faq_question toggle"><span class="faq_q">Q:</span> <span class="faq_title">How do I install a fresh copy of WordPress?</span> <span class="ico"></span></div>
                        <div class="faq_answer toggle_content">
                        This has to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. 
                        </div>
                            	
                        </div>
                    
<pre class="brush: plain">
[toggle_content title="Toggle Content (Click to expand)" type=&quot;boxed&quot; style="box_blue"]
	[toggle_content title="What AfterCare services do you offer?" type="faq"]
	answere 1 here
	[/toggle_content]

    [toggle_content title="Question here?" type="faq"]
    answere 2 here
    [/toggle_content]
	...
[/toggle_content]    
</pre>  

                      <div class="clear"></div>     
                  	</div>       
			</div>
            <!--/ post item -->
                        
            
            
                        
        
	</div>
<!--/ content --> 

<!-- sidebar -->
	<div class="sidebar">
    	
        <div class="sidebar_inner">
        	
            <!-- search widget -->
			<div class="widget-container widget_search">
                            <form method="get" id="searchform" action="#">
                                <div>
                                  <label class="screen-reader-text" for="s">Search for:</label>
                                    <input class="input_search" name="s" id="s" value="Search this blog" onfocus="if (this.value == 'Search this blog') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this blog';}" type="text" />
                                    <input id="searchsubmit" class="btn-submit" value="Submit" type="submit" />
                                </div>
                            </form>
			</div> 
			<!--/ search widget -->
            
            <div class="widget-container widget_categories">
	            	<h3 class="widget-title">Shortcodes Categories</h3>
	                    <ul>
                       		<li><a href="shortcodes-buttons.html"><span>Buttons & Lists</span></a></li> 
	                        <li><a href="shortcodes-text.html"><span>Text & Images</span></a></li>
							<li class="current-menu-item"><a href="shortcodes-tabs.html"><span>Tabs & Toggles</span></a></li>
							<li><a href="shortcodes-charts.html"><span>Charts</span></a></li>  
							<li><a href="shortcodes-columns.html"><span>Columns</span></a></li>  
							<li><a href="shortcodes-lightbox.html"><span>Lightbox</span></a></li>
							<li><a href="shortcodes-tables.html"><span>Tables & Boxes</span></a></li>
							<li><a href="shortcodes-media.html"><span>Media (Videos & Images)</span></a></li>
							<li><a href="shortcodes-maps.html"><span>Maps & Locations</span></a></li>                                
							<li><a href="shortcodes-typography.html"><span>Typography</span></a></li>
							<li><a href="shortcodes-widgets.html"><span>Widgets</span></a></li>
                    	</ul>
                        
			</div> 
             
            
            
            
        </div>		
        <div class="sidebar_bottom"></div> 
    </div>
<!--/ sidebar -->

	<div class="clear"></div>  
</div>
</div>
<!--/ middle -->

<div class="footer">
	<div class="container_12">
    
    	<div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">OUR HOSTING</h3>
                    <ul>
                        <li><a href="#"><span>Website Hosting</span></a></li>                            
                        <li><a href="#"><span>Reseller Hosting</span></a></li>                        	
                        <li><a href="#"><span>Cloud Servers</span></a></li>  
                        <li><a href="#"><span>Site Supercharge</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 1 -->
		<div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">AFFILIATES</h3>
                    <ul>
                        <li><a href="#"><span>Hosting Affiliates</span></a></li>                            
                        <li><a href="#"><span>Affiliate Banners</span></a></li>                        	
                        <li><a href="#"><span>Affiliate Login</span></a></li>  
                        <li><a href="#"><span>Affiliate Sign-up</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 2 --> 
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">SUPPORT</h3>
                    <ul>
                        <li><a href="#"><span>Knowledgebase</span></a></li>                            
                        <li><a href="#"><span>Community Forum</span></a></li>                        	
                        <li><a href="#"><span>Video Tutorials</span></a></li>  
                        <li><a href="#"><span>Contact Live Support</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 3 -->   
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">ABOUT US</h3>
                    <ul>
                        <li><a href="#"><span>About Cloud-Host</span></a></li>                            
                        <li><a href="#"><span>Our Team</span></a></li>
                        <li><a href="#"><span>In the Press</span></a></li>  
                        <li><a href="#"><span>Contact us directly</span></a></li>
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 4 --> 
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">CAREERS</h3>
                    <ul>
                        <li><a href="#"><span>Join our team</span></a></li>
                        <li><a href="#"><span>Job Offerings Board</span></a></li>
                        <li><a href="#"><span>Send your Resume</span></a></li>
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 4 -->  
        <div class="grid_2">
        		<!-- widget contacts -->
                    <div class="widget-container widget_contact">                    
                    	<h3>OUR ADDRESS</h3>
						<div class="contact-address">
                            <div class="address">Rue Teissere, #.24 0600 <br /> Cannes, France</div>
                            <div class="phone">Phone: <strong>+33(0)9399 7987</strong></div>
                            <div class="fax">Fax: <strong>+33(0)9399 7988</strong></div>
                        </div>                            
                    </div>
				<!--/ widget contacts --> 
        </div>
        <!--/ footer col 4 -->
    	
    	<div class="divider"></div>
	    	
    	<div class="footer_support">
	        <div class="icon_write_mail"><a href="#">Write us an Email</a></div>
	        <div class="icon_live_chat"><a href="#">Live Chat 24 / 7</a></div>
	        <div class="icon_phone">Support: +33 (0) 9399 7987</div>
            <div class="clear"></div>
        </div>  
    
	    <div class="copyright">
	        <p>&copy; Copyright 2013  |   Hosting Co. All rights reserved.</p>
		</div>
    
    	<div class="clear"></div>
        
    </div>
</div>

</div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
